<!-- 编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="460"
    :model-value="modelValue"
    :title="isUpdate ? '修改分类信息' : '添加分类信息'"
    @update:modelValue="updateModelValue"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="80px"
      @submit.prevent=""
    >
      <el-form-item label="分类名称" prop="typeName">
        <el-input
          clearable
          v-model="form.typeName"
          placeholder="请输入分类名称"
        />
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="form.typePicType">
          <el-radio-button label="0">地址</el-radio-button>
          <el-radio-button label="1">上传</el-radio-button>
        </el-radio-group>
        <div v-show="form.typePicType == '0'" class="tabBlock">
          <el-input v-model="form.typePicLink" placeholder="请输入图片地址 https://" style="margin-bottom: 10px;"/>
          <el-image v-if="form.typePicLink" :src="form.typePicLink" :preview-src-list="[form.typePicLink]" fit="cover"
                    class="typePic">
          </el-image>
          <img v-if="!form.typePicLink" src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt=""
               slot="placeholder" fit="cover" class="typePic"/>
        </div>
        <div v-show="form.typePicType == '1'" class="tabBlock">
          <!--TODO 上传图片后，可以点击删除图片，这时候要把上传的图片删掉-->
          <image-upload
            :limit="1"
            v-model="form.typePic"
            :item-style="{ width: '260px', height: '160px', margin: 0 }"
            :button-style="{ width: '260px', height: '160px', margin: 0 }"
          />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateModelValue(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        提交
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import {ref, reactive, watch} from 'vue';
import {EleMessage} from 'ele-admin-plus/es';
import {useFormData} from '@/utils/use-form-data';
import {addType} from '@/api/cms/type';
import ImageUpload from '@/views/cms/components/ImageUpload/index.vue';

const emit = defineEmits(['done', 'update:modelValue']);

const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  /** 修改回显的数据 */
  data: Object
});

/** 是否是修改 */
const isUpdate = ref(false);

/** 提交状态 */
const loading = ref(false);

/** 表单实例 */
const formRef = ref(null);

/** 表单数据 */
const [form, resetFields, assignFields] = useFormData({
  typeName: '',
  typePic: '',
  typePicType: '0',
  typePicLink: ''
});

/** 表单验证规则 */
const rules = reactive({
  typeName: [
    {
      required: true,
      message: '请输入分类名称',
      type: 'string',
      trigger: 'blur'
    }
  ]
});

/** 保存编辑 */
const save = () => {
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    loading.value = true;
    addType(form)
      .then((msg) => {
        loading.value = false;
        EleMessage.success(msg);
        updateModelValue(false);
        emit('done');
      })
      .catch((e) => {
        loading.value = false;
        EleMessage.error(e.message);
      });
  });
};

/** 更新modelValue */
const updateModelValue = (value) => {
  emit('update:modelValue', value);
};

watch(
  () => props.modelValue,
  (modelValue) => {
    if (modelValue) {
      if (props.data) {
        assignFields(props.data);
        isUpdate.value = true;
      } else {
        isUpdate.value = false;
      }
    } else {
      resetFields();
      formRef.value?.clearValidate?.();
    }
  }
);
</script>

<style scoped lang="scss">
.tabBlock {
  height: 180px;
  margin-top: 20px;
}

.typePic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
</style>
